<template>
  <div class="het-panel">
    <HETTable ref="hetTable" :config="tableConfig"></HETTable>
  </div>
  <el-dialog v-model="dialog.visible" width="600px" title="导入" @close="resetForm">
    <el-upload ref="uploadRef" action="#" :on-change="onSuccess" :on-exceed="handleExceed" :limit="1" :auto-upload="false" drag accept=".zip">
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        将文件拖到此处或<em>点击上传</em>
        <div class="tip">请上传包含md文件的压缩包</div>
      </div>
    </el-upload>
    <template #footer>
      <el-button @click="dialog.visible = false">取消</el-button>
      <el-button type="primary" @click="submit()">确定</el-button>
    </template>
  </el-dialog>
  <el-drawer v-model="dialog.drawer" title="模板详情" size="80%" destroy-on-close>
    <HETTable ref="temTable" :config="temConfig"></HETTable>
  </el-drawer>
</template>

<script setup>
import { onMounted, ref, computed, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { mAxios, encodeURL } from '~/utils/axios/axios.js'
import { genFileId } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
const dialog = reactive({
  visible: false,
  drawer: false
})
const isEdit = ref(false)
const hetTable = ref()
const tableConfig = ref({
  module: '',
  selectApi: params =>
    mAxios.get('vuln/temp/list', {
      params
    }),
  search: {
    form: {},
    config: []
  },
  columns: [
    {
      label: '模板名称',
      prop: 'name'
    },
    {
      label: '描述',
      prop: 'description'
    },
    {
      label: '漏洞数',
      prop: 'vulnNum'
    },
    {
      label: '操作',
      custom: {
        type: 'button',
        operatBtns: [
          {
            name: '查看详情',
            handleClick: row => {
              // tempId.value = row.id
              // dialog.drawer = true
              router.push({
                path: '/tempdetail',
                query: row
              })
            }
          },
          {
            name: '删除',
            type: 'delete',
            tip: '删除模板会删除下面的漏洞信息，确定删除？',
            delConfirm: row => {
              mAxios.delete('vuln/temp/' + row.id).then(res => {
                res.data.succeed ? ElMessage.success('删除成功') : ElMessage.error('删除失败')
                hetTable.value.getTableData()
              })
            }
          }
        ]
      }
    }
  ],
  controlBtns: [
    {
      name: '导入',
      icon: 'Download',
      type: 'primary',
      handleClick: () => {
        isEdit.value = false
        dialog.visible = true
      }
    }
  ]
})
// 上传本地文件
const uploadRef = ref()
const handleExceed = files => {
  uploadRef.value.clearFiles()
  const file = files[0]
  file.uid = genFileId()
  uploadRef.value.handleStart(file)
}
const filerow = ref(null)
const onSuccess = file => {
  if (file.status === 'ready') {
    filerow.value = file.raw
  }
}
const resetForm = () => {
  uploadRef.value.clearFiles()
}
const submit = () => {
  if (!filerow.value) {
    ElMessage.error('请选择文件')
    return
  }
  const formData = new FormData()
  formData.append('file', filerow.value)
  mAxios
    .post('upload/vulntemplate', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    .then(res => {
      dialog.visible = false
      res.data.succeed ? ElMessage.success('导入成功') : ElMessage.error('导入失败')
      hetTable.value.getTableData()
    })
}
const tempId = ref(null)
const temTable = ref()
const temConfig = ref({
  module: '',
  selectApi: params =>
    mAxios.get('vuln', {
      params: encodeURL(params)
    }),
  search: {
    form: { tempId: tempId.value },
    config: [
      {
        label: '',
        prop: 'cveId',
        type: 'input',
        style: { width: '160px' },
        setting: { placeholder: 'CVE' }
      },
      {
        label: '',
        prop: 'vulnName',
        type: 'input',
        style: { width: '160px' },
        setting: { placeholder: '漏洞名称' }
      },
      {
        label: '',
        prop: 'vulnType',
        type: 'select',
        style: { width: '160px' },
        setting: { placeholder: '漏洞类型' },
        options: [{ label: '系统漏洞', value: '系统漏洞' }]
      },
      {
        label: '',
        prop: 'severity',
        type: 'select',
        style: { width: '160px' },
        setting: { placeholder: '漏洞等级' },
        options: [{ label: '严重', value: 'HIGH' }]
      },
      {
        label: '',
        prop: 'stats',
        type: 'select',
        style: { width: '160px' },
        setting: { placeholder: '漏洞状态' },
        options: [{ label: '待处理', value: 'serisly' }]
      }
      // {
      //   label: "",
      //   prop: "timeRange",
      //   type: "date-picker",
      //   setting: {
      //     type: "datetimerange",
      //     rangeSeparator: "到",
      //     startPlaceholder: "开始时间",
      //     endPlaceholder: "结束时间",
      //   },
      // },
    ]
  },
  columns: [
    { type: 'selection', width: 34 },
    {
      label: '漏洞名称',
      prop: 'vulnName'
    },
    {
      label: '描述',
      prop: 'description',
      width: 300
    },
    {
      label: '漏洞影响',
      prop: 'affectedProduct'
    },
    // {
    //   label: '漏洞类型',
    //   prop: 'vulnType'
    // },
    {
      label: '漏洞等级',
      prop: 'severity'
    },
    {
      label: 'cvss评分',
      prop: 'baseScore'
    },
    {
      label: '漏洞状态',
      prop: 'status'
    },
    {
      label: '参考',
      prop: 'reference'
    },
    {
      label: '发现时间',
      prop: 'publishTime',
      width: 200
    }
    // {
    //   label: "操作",
    //   width: 260,
    //   custom: {
    //     type: "button",
    //     operatBtns: [
    //       {
    //         name: "编辑",
    //         disabledFn: (row) => {
    //           return row.active == 1;
    //         },
    //         handleClick: (row) => {
    //           mAxios
    //             .get("datacenter/collector/config/db/get?id=" + row.id)
    //             .then((res) => {
    //               isEdit.value = true;
    //               let columns = res.data.columns?.map((item) => {
    //                 return item.field;
    //               });
    //               filters.value = res.data.filters?.map((item) => {
    //                 let timeRange;
    //                 if (item.earliest && item.latest) {
    //                   timeRange = [item.earliest, item.latest];
    //                 }
    //                 return {
    //                   field: item.field,
    //                   operator: item.operator,
    //                   value: item.value || "",
    //                   timeRange,
    //                 };
    //               });
    //               formData.value = {
    //                 ...res.data,
    //                 columns,
    //                 filters: [],
    //               };
    //               dialog.visible = true;
    //             });
    //         },
    //       },
    //       {
    //         name: "删除",
    //         type: "delete",
    //       },
    //     ],
    //   },
    // },
  ],
  controlBtns: []
})
</script>

<style lang="scss" scoped>
.tip {
  margin-top: 5px;
  color: red;
}
</style>
